<template>
    <div class="box">
      <div class="header"></div>
      <div class="content">
        <van-icon name="user-o" size="120"/>
        <h1>hi~尊敬的用户</h1>
        <div class="login" v-if="isLogin" @click="Login">立即登录</div>
        <div class="login" v-else @click="Logout">退出登录</div>
      </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Icon } from 'vant'
import { mapMutations } from 'vuex'

Vue.use(Icon)
export default {
  data () {
    return {

    }
  },
  computed: {
    isLogin () {
      console.log(localStorage.getItem('isLogin'))
      if (localStorage.getItem('isLogin')) return localStorage.getItem('isLogin') !== 'true'
      return true
    }
  },
  methods: {
    ...mapMutations({
    }),
    Logout () {
      // 清空localstorage中的登录信息
      localStorage.removeItem('token')
      localStorage.removeItem('userid')
      localStorage.removeItem('isLogin')
      this.$store.commit('changeIsLogin', false)
      this.$router.replace('/login')
    },
    Login () {
      this.$router.push('/login')
    }
  }
}
</script>

<style lang='stylus' scoped>
.container .box .header
  background-color #87CEF8
.content
  text-align center
  display flex
  flex-direction column
  padding-top 4rem
h1
  padding 1rem
.login
  margin 0 auto
  width 9rem
  height 2.5rem
  background-color skyblue
  border-radius 1.25rem
  color white
  font-size 20px
  text-align center
  line-height 2.5rem
</style>
